<template>
	<view class="haderbaritem" :style="{paddingTop:navbarHeight + 2 + 'px'}">
		<view class="headeritembar">
			<view class="rightbox" @click="isSelectIndex">
				<view class="rigtword">{{wordIndex}}</view>
				<uni-icons type="down" size="16" style="margin-left: 2rpx;"></uni-icons>

			</view>
			<view class="leftboxall">
				<view class="isflex xi" @click="toDetail">更多行程</view>
				<view class="isflex ding" @click="toTutorial">立即订购</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		navbarHeight
	} from '@/config/systemInfo.js'
	import {
		routerGuard
	} from '@/config/RouteGuard.js'
	const propos = defineProps({
		wordIndex: {
			type: String,
			default: '川西'
		},
		shopID: {
			type: Number,
			default: 0
		}
	})
	const emits = defineEmits(['isselect'])
	const isSelectIndex = () => {
		emits('isselect')
	}
	const toDetail = () => {
		uni.navigateTo({
			url: '/pages/allDestination/allDestination?filterType=time'
		});
	}
	const toTutorial = () => {
		const url = `/homeSubpages/ProductDetails/index?ShopId=${propos.shopID}`;
		routerGuard(url);
	}
</script>

<style scoped>
	.headeritembar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 0 30rpx 0 10rpx;
		box-sizing: border-box;
	}

	.haderbaritem {
		align-items: flex-end;
		padding-bottom: 12rpx;
		width: 100vw;
		background-color: white;
		border-radius: 0px 0px 5px 5px;
	}

	.xi {
		background-color: white;
		color: black;
		border: 1rpx solid #828282;
	}

	.ding {
		background-color: black;
		color: white;
		border: 1rpx solid black;
	}

	.rigtword {
		font-size: 26rpx;
		/* border-bottom: 1px solid #545050; */
		font-family: "仓耳渔阳体 W05";
	}

	.isflex {
		font-size: 24rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 56rpx;
		width: 140rpx;
		height: 50rpx;
	}

	.rightbox {
		margin-left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.leftboxall {
		display: flex;
		justify-content: space-between;
		width: 45%;
	}
</style>